<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="background-color: var(--sapBackgroundColor); height: 350px">
<!-- playground-fold-end -->
    <ui5-label>Search with Grouped Suggestions and Show More (N) Item</ui5-label>
    <ui5-search id="searchShowMore" show-clear-icon placeholder="Placeholder">
        <ui5-search-message-area slot="messageArea" description="You can try the following" text="Oh, there are no results"></ui5-search-message-area>
        <ui5-search-item-group id="group1" header-text="Group Header">
        </ui5-search-item-group>
		<ui5-search-item-group id="group2" header-text="Group Header">
			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
			<ui5-search-item text="List Item" icon="globe" ></ui5-search-item>
        </ui5-search-item-group>
    </ui5-search>
<!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>
</html>
<!-- playground-fold-end -->